﻿@page "/Calendar/Multi-Selection"

@using Syncfusion.Blazor.Calendars

@inherits SampleBaseComponent;

<SampleDescription>
   <p>The following sample demonstrates the multiple date selection functionalities of the Calendar. Click/Touch the desired date from the Calendar and the selected date will be added to the Values property of the calendar.</p>
</SampleDescription>
<ActionDescription>
    <p>Multi selection sample demonstrates, how to enable and select the multiple date in a calendar by using <a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfCalendar-1.html#Syncfusion_Blazor_Calendars_SfCalendar_1_IsMultiSelection' target='_blank'> IsMultiSelection</a> and <a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarType.html' target='_blank'> Values</a> properties . Here 10, 15 and 25 date's are selected.</p>
    <p>More information on the calendar multi selection can be found in this<a href='https://blazor.syncfusion.com/documentation/calendar/multi-select/#multi-selection' target='_blank'> documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <div class="calender-section">
        <div id="calender-control">
            <SfCalendar TValue="DateTime?" IsMultiSelection="@MultiSelect" @bind-Values="@MultiValue">
            </SfCalendar>
        </div>
        <div class="valuesWrapper col-lg-6 col-sm-8 col-md-8">
            <h5>Selected values</h5>
            <div class="contentValue">
             @foreach (var element in MultiValue)
             {
                <div id="multiSelect">@element.ToString("ddd, dd MMM yyy HH':'mm':'ss 'GMT'")
                </div>
             }
            </div>
        </div>
    </div>
</div>

<style>
    #calender-control {
        max-width: 300px;
        margin: 0 auto;
    }

    .contentValue {
        padding: 10px;
        overflow: auto;
        max-height: 100px;
        margin-bottom: 10px;
        border: 1px solid rgba(0, 0, 0, 0.12);
    }

    .valuesWrapper {
        margin: 0 auto;
        float: none;
        padding: 0;
        max-width: 370px;
    }
</style>

@code {
    public bool MultiSelect { get; set; } = true;
    public DateTime[] MultiValue = new DateTime[] { new DateTime(DateTime.Now.Year, DateTime.Now.Month, 10), new DateTime(DateTime.Now.Year, DateTime.Now.Month, 15), new DateTime(DateTime.Now.Year, DateTime.Now.Month, 25) };

}